<template>
  <view class="list">
      <view
      v-for="(item,index) in data"
      :key="item.id"
      @tap='changeTabs(index)'
      :class="{
          active:activeIndex === index
      }"
       class="item">{{item.text}}</view>
  </view>
</template>

<script>
export default {
    props:['data'],
    data(){
        return{
            activeIndex : 0
        }
    },
    methods:{
        changeTabs(index){
           this.activeIndex = index
        }
    }
}
</script>

<style lang="less">
  .list{
      height: 88rpx;
      display: flex;
      justify-content: space-evenly;
      .item{
          width: 184rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-bottom: 4rpx solid transparent;
          &.active{
          border-bottom: 4rpx solid red;
          }
      }
  }
</style>